<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-08-21 10:13:27
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-22 17:58:28
 * @FilePath: /vue3-uniapp/src/pages/order/DetailView/DetailView.vue
-->
<script lang="ts" setup>
import { useAppStore } from '@/store';
import { useAfterAuthAndMescrollInit } from '@/service/hook/useAfterAuthAndMescrollInit';
import { useMescrollHeight } from '@/service/useMescrollHeight';
import { useOrderCase } from '@/service/useOrderCase';
import { useOrderAssign } from '@/service/useOrderAssign';
import { notifyAreaEsListChange } from '@/service/useMy';

const { cssVarObject } = storeToRefs(useAppStore());

const { topHeight, bottomHeight, mescrollHeight } = useMescrollHeight();

const orderId = ref<number | undefined>();
const orderType = ref<number | undefined>(); // 1 上报 2 下派

const { detail: reportDetail, getDetail } = useOrderCase();
const { detail: assignDetail, getDetail: getAssignDetail } = useOrderAssign();

const detail = computed<
    (typeof reportDetail)['value'] | (typeof assignDetail)['value'] | undefined
>(() => {
    if (orderType.value === 1) {
        return reportDetail.value;
    } else if (orderType.value === 2) {
        return assignDetail.value;
    }
    return undefined;
});
const { onMescrollInit } = useAfterAuthAndMescrollInit(
    async (query, viewInstance) => {
        try {
            let res;
            if (query?.orderId) {
                orderId.value = +query.orderId;
            }
            if (query?.orderType) {
                orderType.value = +query.orderType;
            }
            if (orderId.value === undefined) {
                throw new Error('无法获取工单id');
            }
            if (orderType.value === 1) {
                res = await getDetail(orderId.value);
            } else {
                res = await getAssignDetail(orderId.value);
            }
            if (res === undefined) {
                throw new Error('请求失败，请联系管理员');
            }
            viewInstance.endSuccess();
        } catch (e) {
            console.log(e);
            viewInstance.endErr();
        }
    }
);

const handleUpdate = () => {
    uni.$uv.route({
        type: 'back'
    });
    notifyAreaEsListChange({
        current: 1,
        size: 20
    });
};
</script>

<template>
    <PageContainer>
        <view class="detailview-container">
            <FixedTop v-model:height="topHeight">
                <BaseNavbar :bg-color="cssVarObject['--bg-front']">
                    <template #default>
                        <view class="c-text text-base fw-700">事件详情</view>
                    </template>
                </BaseNavbar>
            </FixedTop>

            <MescrollView
                @init="onMescrollInit"
                :height="mescrollHeight"
                :canUp="false"
                :canDown="false"
            >
                <view class="main">
                    <view class="bg-front p-[20rpx]">
                        <view class="mb-[20rpx]">
                            内容: {{ detail?.description }}
                        </view>
                        <TnButton @click="handleUpdate"
                            >假装更新了工单然后回到列表并更新列表</TnButton
                        >
                    </view>
                </view>
            </MescrollView>

            <FixedBottom v-model:height="bottomHeight" />
        </view>
    </PageContainer>
</template>

<style lang="scss" scoped>
.detailview-container {
    background: var(--bg-background);
    min-height: 100vh;
    .main {
        padding: 24rpx;
        // padding-bottom: 100rpx;
    }
}
</style>
